<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>015</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 300px;
				height: 300px;
				border: 1px solid #000000;
				margin: 50px auto;
			}
			.box .header {
				height: 40px;
			}
			.box .header span {
				float: left;
				width: 99px;
				height: 39px;
				border-right: 1px solid #000000;
				border-bottom: 1px solid #000000;
				line-height: 39px;
				text-align: center;
				background-color: #eee;
			}
			.box .header span:last-child {
				width: 100px;
				border-right: none;
			}
			.box .header span.cur {
				background-color: #fff;
				border-bottom: none;
				font-weight: bold;
			}
			.box .body {
				height: 260px;
			}
			.box .body div {
				display: none;
			}
			.box .body div.active {
				display: block;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="header" id="header">
				<span class="cur">新闻</span>
				<span>体育</span>
				<span>时尚</span>
			</div>
			<div class="body" id="body">
				<div class="active">新闻内容...</div>
				<div>体育内容...</div>
				<div>时尚内容...</div>
			</div>
		</div>
		
		
		
		<!--引入jquery包-->
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//当鼠标移入header里的span，当前span加cur，让body中的div加active
//			$("#header span").mouseenter(function() {
				//1、当前span加cur
				/*$(this).addClass("cur");*/
				//2、排他
				/*$(this).siblings().removeClass("cur");*/
				
				//3、使用节点操作
				/*$(this).parent(".header").siblings(".body").children("div").eq($(this).index()).addClass("active")
				.siblings().removeClass("active");*/
//			});
			
			
			//连续打点(将1 2 3合并)
			$("#header span").mouseenter(function() {
				$(this).addClass("cur")
				.siblings().removeClass("cur")
				.parent().siblings().children().eq($(this).index()).addClass("active")
				.siblings().removeClass("active");
			});
		</script>
	</body>
</html>
